<template>
    <fieldset>
        <legend>商品列表</legend>
        <div id="box">
            <div class="top">
                编号:<input type="text" v-model="num">
                产品名称:<input type="text" v-model="name"><br>
                图片地址:<input type="text" v-model="imgSrc">
                价格:<input type="text" v-model="price">
                <button @click="add">添加</button>
            </div>

            <table border=2>
                <thead>
                    <tr>
                        <th><input type="checkbox" v-model="allCheck" @change="allCheckChange"></th>
                        <th>编号</th>
                        <th>图片</th>
                        <th>产品名称</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tr v-for="(item,index) in round" :key="index">
                    <td>
                        <input type="checkbox" v-model="checks" :value="item">
                    </td>
                    <td>{{item.num}}</td>
                    <td>
                        <img :src="item.imgSrc" alt="" height="80">
                    </td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="decrease(item)" :disabled="item.count===0">-</button>&nbsp;
                        <b>{{item.count}}</b>&nbsp;
                        <button @click="increase(item)">+</button>
                    </td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </table>
            <!-- <p>{{checks}}</p> -->
            <div class="total">总价格:{{total}}</div>
        </div>
    </fieldset>
</template>


<script>
    export default{
        data(){
            return {
                checks:[],
                allCheck:false,
                num:"",
                name:"",
                imgSrc:"",
                price:"",
                count:1,
                round:
                JSON.parse(localStorage.getItem('text2'))??
                [
                    {
                        id:1,
                        imgSrc:"https://img0.baidu.com/it/u=232034455,26578812&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
                        num:1,
                        name:"张艺兴",
                        price:100,
                        count:1
                    },
                    {
                        id:2,
                        imgSrc:"https://img1.baidu.com/it/u=1333204497,3522022364&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500",
                        num:2,
                        name:"赵丽颖",
                        price:99,
                        count:1
                    },
                    {
                        id:3,
                        imgSrc:"https://img1.baidu.com/it/u=2105079319,591796640&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889 ",
                        num:3,
                        name:"迪丽热巴",
                        price:101,
                        count:1
                    }
                ],

            }
        },
        methods:{
            // 添加商品
            add(){
                // 先判断输入框是否为空，做一个非空验证
                if(!this.num||!this.name||!this.price){
                    alert('编号 产品名称 价格必填')
                    return 
                }
                
                // 以对象的形式将数据传入round数组中
                // 先将输入框中的数据传到对象中
                let obj={
                    id:Math.random().toString(32).substr(2),
                    num:this.num,
                    name:this.name,
                    imgSrc:this.imgSrc,
                    price:this.price,
                    count:1
                }

                // 将创建的对象传入数组
                this.round.push(obj)


                // 每添加一条数据就将round传入本地存储中
                localStorage.setItem('text2',JSON.stringify(this.round))
            },

            // 删除商品
            del(index){
                // 利用数组的splice方法通过传入的index确定是哪条数据，然后删除
                this.round.splice(index,1)

                // 删除数据之后，将新数组存到本地存储
                localStorage.setItem('text2',JSON.stringify(this.round))
            },

            // 按钮全选
            allCheckChange(){
                if(this.allCheck){
                    this.checks = this.round
                }else{
                    this.checks = []
                }
            },
            
            // 数量的减少
            decrease(that){
                that.count--
            },
            // 数量的增加
            increase(that){
                that.count++
            }

        },

        // 反选--当列表中的按钮都亮起来，那么全选按钮也自动要被勾选
        watch:{
            checks(newVal){
                // 因为checks是和列表中的按钮动态绑定，那么也就印证checks中有几条数据，那么就有几个按钮被勾选，所以我们可以根据数组的长度来判断列表中的按钮是否全部被勾选
                if(this.checks.length===this.round.length){
                    // 全选按钮被勾选
                    this.allCheck = true
                }else{
                    this.allCheck = false
                }
            }
        },

        // 计算总价格
        computed:{
            total(){
                // 数组的reduce方法可以在遍历数组的情况下，计算总价格，
                // 第一个参数是回调函数，回调函数中第一个参数是总值，第二个参数是每一个元素
                // 第二个参数是total的起始值
                let res = this.checks.reduce((total,item)=>{
                    return total += item.count*item.price
                    
                },0)
                // 取两位小数
                return res.toFixed(2)
            }
        }
    }




</script>



<style scoped>
    #box{
        margin: 20px 0 0 100px;
    }
    table{
        border-collapse: collapse;
        margin-bottom: 10px;
    }
    .top,.center{
        padding: 5px 5px;
        width: 600px;
        border:2px solid ;
        margin-bottom: 10px;
    }
    th{
        background-color: aqua;
    }
    td{
        text-align: center;
        padding:0 27px;
    }
    .total{
        border: 2px solid ;
        width: 86%;
        line-height: 50px;
        font-size: 30px;
        font-weight: 900;
    }
</style>